<template>
  <div class="content">
    <div class="title">
      <div class="text">
        <div class="font">实时监控</div>
      </div>
    </div>
    <div class="echart">
      <div id="Monitor" style="width:100%;height:300px;" />
    </div>
    <!-- <div class="name">
      <div class="text">
        <div class="bground" />
        <div style="margin-right: 22%;">未带安全帽</div>
      </div>
      <div class="text">
        <div style="background:rgba(54,203,203,1);" class="bground" />
        <div style="margin-right: 22%;">实时人数</div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { currentData } from '@/api/autonym'

export default {
  name: 'Monitor',
  data() {
    return {
      data: {
        sign: 0,
        total: 0
      }
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    // 获取数据
    async getDetail() {
      const res = await currentData()
      if (res.code === 200) {
        if (res.data) {
          this.data = res.data
        }
        this.$nextTick(function() {
          this.drawPie()
        })
      }
    },
    drawPie() {
      const myChart = this.$echarts.init(document.getElementById('Monitor'))
      var ydata = [{
        name: '未带安全帽',
        value: this.data.sign || 0
      },
      {
        name: '实时人数',
        value: this.data.total || 0
      }
      ]
      var color = ['#36CBCB', '#D29A00']
      var xdata = ['未带安全帽', '实时人数']
      const option = {
        color: color,
        legend: {
          show: true,
          icon: 'circle',
          orient: 'vartical',
          x: 'center',
          y: 'bottom',
          top: '80%',
          data: xdata,
          textStyle: {// 图例文字的样式
            color: '#ffffff',
            fontSize: 12
          },
          formatter: function(name) {
            return '' + name
          }
        },
        series: [{
          type: 'pie',
          clockwise: false, // 饼图的扇区是否是顺时针排布
          minAngle: 2, // 最小的扇区角度（0 ~ 360）
          radius: ['40%', '70%'],
          center: ['50%', '40%'],
          avoidLabelOverlap: false,
          itemStyle: { // 图形样式
            normal: {
              borderColor: '#25262F',
              borderWidth: 6
            }
          },
          label: {
            normal: {
              show: false,
              position: 'center',
              formatter: '{text|{b}}\n{c} ({d}%)',
              rich: {
                text: {
                  color: '#ffffff',
                  fontSize: 14,
                  align: 'center',
                  verticalAlign: 'middle',
                  padding: 8
                },
                value: {
                  color: '#8693F3',
                  fontSize: 24,
                  align: 'center',
                  verticalAlign: 'middle'
                }
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#ffffff',
                fontSize: 14
              }
            }
          },
          data: ydata
        }]
      }
      myChart.setOption(option, window.onresize = myChart.resize)
      setTimeout(function() {
        myChart.on('mouseover', function(params) {
          if (params.name == ydata[0].name) {
            myChart.dispatchAction({
              type: 'highlight',
              seriesIndex: 0,
              dataIndex: 0
            })
          } else {
            myChart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: 0
            })
          }
        })

        myChart.on('mouseout', function(params) {
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 0
          })
        })
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 0
        })
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  // color: #ffffff;
  // border: 1px solid rgba(221,221,221,0.2);
  padding: 10px;
  .title{
    display: flex;
    .text{
      flex: 1;
      text-align: left;
      .font{
        color:#ffffff;
        cursor: pointer;
        font-size: 12px;
        font-weight: 400;
        padding: 5px 0;
        .number{
          font-size:14px;
          font-weight:500;
          color:rgba(255,255,255,0.85);
        }
      }
      .money{
         font-size: 12px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .echart{
    // height: 70px;
    margin: 0 0 32px 0;
  }
  .name{
    margin-top: -60px;
    text-align: center;
    color:rgba(255,255,255,1);
    .text{
      text-align: center;
      margin-bottom: 6px;
      .bground{
        width:8px;
        height:8px;
        background:rgba(210,154,0,1);
        border-radius: 4px;
        float: left;
        margin-left: 27%;
        margin-top: 5px;
      }
    }
  }
}
</style>
